<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><b>我的工作</b></span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-col :xs="20" :sm="20" :lg="7">
              <div class="chart-wrapper" style="height: 250px">
                <approve-pie-chart />
              </div>
            </el-col>
            <el-col :xs="20" :sm="20" :lg="7">
              <div class="chart-wrapper" style="height: 250px">
                <attend-pie-chart />
              </div>
            </el-col>
            <el-col :xs="20" :sm="20" :lg="7">
              <div class="chart-wrapper" style="height: 250px">
                <work-pie-chart />
              </div>
            </el-col>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-divider /> -->

    <!-- <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--medium">
              <el-col :sm="24" :lg="20" style="padding-left: 20px; height: 40px;">
                <el-button type="primary" size="mini" icon="el-icon-cloudy" plain>
                  <router-link :to="'/employee/apply/entry'" class="link-type">
                    <span>员工入职办理</span>
                  </router-link>
                </el-button>
                <el-button type="primary" size="mini" icon="el-icon-cloudy" plain>
                  <router-link :to="'/employee/apply/employeeTransfer'" class="link-type">
                    <span>员工调动</span>
                  </router-link>
                </el-button>
              </el-col>
          </div>
        </el-card>
      </el-col>
    </el-row> -->
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span><b>常用功能</b></span>
          </div>
          <div class="commondiv">
            <div class="item">
              <div class="box">
                <router-link :to="'/employee/apply/vacation'" class="link-type">
                  <div class="round">
                    <div class="roundIcon round_bg_1">
                      <svg-icon icon-class="star" class-name="custom-icon" />
                    </div>
                    <div class="text">请假</div>
                  </div>
                </router-link>
              </div>
              <div class="box">
                <router-link :to="'/employee/apply/go_out'" class="link-type">
                  <div class="round">
                    <div class="roundIcon round_bg_2">
                      <svg-icon icon-class="guide" class-name="custom-icon" />
                    </div>
                    <div class="text">外出</div>
                  </div>
                </router-link>
              </div>
              <div class="box">
                <router-link
                  :to="'/employee/apply/sign_agin'"
                  class="link-type"
                >
                  <div class="round">
                    <div class="roundIcon round_bg_3">
                      <svg-icon icon-class="edit" class-name="custom-icon" />
                    </div>
                    <div class="text">补签</div>
                  </div>
                </router-link>
              </div>
              <div class="box">
                <div class="round">
                  <div class="roundIcon round_bg_4">
                    <svg-icon icon-class="date" class-name="custom-icon" />
                  </div>
                  <div class="text">加班</div>
                </div>
              </div>
              <div class="box">
                <div class="round">
                  <div class="roundIcon round_bg_5">
                    <svg-icon icon-class="job" class-name="custom-icon" />
                  </div>
                  <div class="text">倒休</div>
                </div>
              </div>
              <div class="box">
                <div class="round">
                  <div class="roundIcon round_bg_6">
                    <svg-icon icon-class="number" class-name="custom-icon" />
                  </div>
                  <div class="text">出差</div>
                </div>
              </div>
              <div class="box">
                <div class="round">
                  <div class="roundIcon round_bg_7">
                    <svg-icon icon-class="chart" class-name="custom-icon" />
                  </div>
                  <div class="text">资质</div>
                </div>
              </div>
              <div class="box">
                <router-link :to="'/employee/apply/leave'" class="link-type">
                  <div class="round">
                    <div class="roundIcon round_bg_8">
                      <svg-icon icon-class="user" class-name="custom-icon" />
                    </div>
                    <div class="text">离职</div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>

          <!-- <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-row :gutter="1">
              <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
                <div>
                  <router-link
                    :to="'/employee/apply/vacation'"
                    class="link-type"
                  >
                    <img src="../assets/images/homeicon.png" />
                    <div>请假</div>
                  </router-link>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
                <div>
                  <router-link :to="'/employee/apply/go_out'" class="link-type">
                    <img src="../assets/images/homeicon.png" />
                    <div>外出</div>
                  </router-link>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
                <div>
                  <router-link
                    :to="'/employee/apply/sign_agin'"
                    class="link-type"
                  >
                    <img src="../assets/images/homeicon.png" />
                    <div>补签</div>
                  </router-link>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
                <img src="../assets/images/homeicon.png" />
                <div>加班</div>
              </el-col>
              <p>
                <b> </b>
              </p>
            </el-row>
            <el-row style="margin-top: 40px">
              <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
                <img src="../assets/images/homeicon.png" />
                <div>调休</div>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
                <img src="../assets/images/homeicon.png" />
                <div>出差</div>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
                <img src="../assets/images/homeicon.png" />
                <div>资质</div>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="6" class="bottomLeft">
                <div>
                  <router-link :to="'/employee/apply/leave'" class="link-type">
                    <img src="../assets/images/homeicon.png" />
                    <div>离职</div>
                  </router-link>
                </div>
              </el-col>
            </el-row>
            <el-row style="margin-top: 100px"> </el-row>
          </div> -->
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span><b>事件管理</b></span>
          </div>
          <div>
            <calendar />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span><b>数据统计</b></span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <pie-chart style="height: 400px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span><b>数据统计</b></span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <bar-chart style="height: 400px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><b>数据统计</b></span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <raddar-chart style="height: 500px"/>
          </div>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import ApprovePieChart from "./dashboard/ApprovePieChart";
import AttendPieChart from "./dashboard/AttendPieChart";
import WorkPieChart from "./dashboard/WorkPieChart";
import BarChart from "./dashboard/BarChart";
import Calendar from "./calendar";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};
export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    ApprovePieChart,
    AttendPieChart,
    WorkPieChart,
    BarChart,
    Calendar,
  },
  data() {
    return {
      // 版本号
      version: "3.8.2",
      lineChartData: lineChartData.newVisitis,
      setDate: new Date(), // 选择的日期
    };
  },
  methods: {
    callVavation() {
      console.info("点击请假");
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  .calendar {
    border: 1px solid #ebeef5;
  }
  .custom-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
    color: #fff;
  }

  .bottomLeft {
    display: inline-block;
    text-align: center;

    img {
      width: 70px;
      height: 70px;
    }
  }
  .commondiv {
    display: flex;

    .item {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      justify-content: center;
      .box {
        flex: 0 0 20%;
        background: #fff;
        margin-left: 7px;
        margin-right: 7px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 20px;
        .round {
          display: flex;
          flex-direction: column;
          align-items: center;
          .roundIcon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .round_bg_1 {
            background: #90e873;
          }
          .round_bg_2 {
            background: #fe9d2d;
          }
          .round_bg_3 {
            background: #48dbfb;
          }
          .round_bg_4 {
            background: #21de70;
          }
          .round_bg_5 {
            background: #65c5f1;
          }
          .round_bg_6 {
            background: #eccc68;
          }
          .round_bg_7 {
            background: #ff7f50;
          }
          .round_bg_8 {
            background: #90e873;
          }
        }
      }
    }
  }
}
</style>
